<script setup lang="ts">
import { ref } from 'vue';

const keyword = ref('');
const active = ref(0);

// 列表
const list=ref([])
</script>
<template>
  <!-- 搜索 -->
  <van-search v-model="keyword" placeholder="搜索您感兴趣的课程" />
  <div class="course">
    <!-- 增值课程 -->
    <div class="added_course">
      <van-cell is-link>
        <template #title>
          <span class="custom-title">增值课程</span>
        </template>
        <template #right-icon>
          <span>查看更多</span><van-icon name="arrow" />
        </template>
      </van-cell>
      <van-tabs v-model:active="active" shrink>
        <van-tab title="全部课程">
          <course-card :list="list"></course-card>
        </van-tab>
        <van-tab title="组织岗位增值课程">
          <course-card :list="list"></course-card>
        </van-tab>
        <van-tab title="项目角色增值课程">
          <course-card :list="list"></course-card>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 选修课程 -->
    <div class="elective_course">
      <van-cell is-link>
        <template #title>
          <span class="custom-title">选修课程</span>
        </template>
        <template #right-icon>
          <span>查看更多</span><van-icon name="arrow" />
        </template>
      </van-cell>
      <van-tabs v-model:active="active" shrink>
        <van-tab title="全部课程">
          <course-card :list="list"></course-card>
        </van-tab>
        <van-tab title="组织岗位增值课程">
          <course-card :list="list"></course-card>
        </van-tab>
        <van-tab title="项目角色增值课程">
          <course-card :list="list"></course-card>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 必修课程 -->
    <div class="require_course">
      <van-cell is-link>
        <template #title>
          <span class="custom-title">必修课程</span>
        </template>
        <template #right-icon>
          <span>查看更多</span><van-icon name="arrow" />
        </template>
      </van-cell>
      <van-tabs v-model:active="active" shrink>
        <van-tab title="全部课程">
          <course-card :list="list"></course-card>
        </van-tab>
        <van-tab title="组织岗位增值课程">
          <course-card :list="list"></course-card>
        </van-tab>
        <van-tab title="项目角色增值课程">
          <course-card :list="list"></course-card>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.custom-title {
  font-size: 16px;
  font-weight: 700;
}
.desc {
  font-size: 14px;
  color: #8b8e94;
  margin-left: 8px;
}
.course {
  background-color: #fff;
  
  .van-cell.van-cell--clickable {
    align-items: center;
  }
}
</style>
